<template>
  <a-card v-loading="loading">
    <title-name title="批注意见" />
    <div class="mb20p">
      <a-button
        v-if="!isDetail && !businessId"
        type="primary"
        class="mr20p"
        @click="
          form = {}
          visible = true
        "
      >
        添加
      </a-button>
    </div>
    <b-table
      ref="table"
      bordered
      :columns="commentColumns"
      :request="loadData"
      :show-page="false"
    >
      <span
        slot="index"
        slot-scope="text, record, index"
      >{{ index + 1 }}</span>
      <span
        slot="fileInfoVO"
        slot-scope="text, record"
      >
        <a-popover
          v-if="record.fileInfoVO && record.fileInfoVO.fileName"
          :key="record.fileInfoVO.fileId"
          placement="top"
        >
          <template slot="content">
            <a
              style="white-space:nowrap"
              :href="$fileUrl(record.fileInfoVO)"
              target="_parent"
            >下载</a>
            <a-divider type="vertical" />
            <a
              :key="record.fileInfoVO.fileId"
              @click="$filePreview(record.fileInfoVO)"
            >查看</a>
          </template>
          <a>{{ record.fileInfoVO.fileName }} </a>
        </a-popover>
      </span>
      <!-- <span slot="sendStatus" slot-scope="text">
        {{ text ? '已推送' : '未推送' }}
      </span> -->
      <template
        slot="operation"
        slot-scope="text, record"
      >
        <div
          v-if="!isDetail"
          class="pub-table-list-action"
        >
          <!-- <template v-if="!businessId"> -->
          <template v-if="record.creatorId === $userInfo().id">
            <span @click="editComment(record)">编辑</span>
            <span @click="handleDel(record.id)">删除</span>
            <!-- <span @click="push(record.id)">推送</span> -->
          </template>
          <!-- </template> -->
          <!-- <span v-else @click="editFeedback(record)">反馈</span> -->
        </div>
      </template>
    </b-table>

    <a-modal
      title="批注意见"
      class="normal-modal page-detail"
      :confirm-loading="loading"
      :visible="visible"
      @cancel="visible = false"
      @ok="save"
    >
      <a-form-model
        ref="formRules"
        class="requiredFormItem"
        :model="form"
        :rules="formRules"
      >
        <a-row>
          <a-col span="24">
            <a-form-model-item
              label="批注意见"
              prop="suggestion"
            >
              <b-textarea v-model="form.suggestion" />
            </a-form-model-item>
          </a-col>
          <a-col span="24">
            <a-form-model-item
              label="上传附件"
              prop="fileInfoVO"
            >
              <b-upload
                business-code="LCM10"
                upload-type="single"
                :file-list.sync="form.fileInfoVO"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
  </a-card>
</template>

<script>
import BUpload from '@/components/BComponents/BUpload'
import riskListApi from '@/api/legal/risk/list'

export default {
  name:'a'+Date.now(),
  components: {
    BUpload
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    isDetail: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      businessId: this.$route.query.businessId,
      loading: false,
      visible: false,
      feedbackVisible: false,
      selectPersonVisible: false,
      commentColumns: [
        {
          title: '序号',
          dataIndex: 'branchCompany',
          scopedSlots: { customRender: 'index' },
          width: 70
        },
        {
          title: '批注意见',
          dataIndex: 'suggestion',
          width: '50%'
        },
        {
          title: '附件',
          dataIndex: 'fileInfoVO',
          scopedSlots: { customRender: 'fileInfoVO' }
        },
        {
          title: '批注人',
          dataIndex: 'creatorName'
        },
        {
          title: '批注时间',
          dataIndex: 'createTime',
          width: 120
          //   customRender:(e)=>{
          //       console.log(this)
          //       return e ? this.$dateFormat(e,'D') : '无'
          //   }
        },
        {
          title: '操作',
          width: 120,
          fixed: 'right',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      loadData: (params) => {
        return riskListApi.findListByComments({}, Object.assign(params, { id: this.id }))
      },
      form: {
        personList: [],
        suggestion: '',
        fileInfoVO: []
      },
      formRules: {
        suggestion: { required: true, message: '批注意见不能为空', trigger: 'blur' }
      },
      chooseRow: null
    }
  },
  methods: {
    editComment(row) {
      this.form = this.$clone(row)
      this.visible = true
    },
    save() {
      this.$refs.formRules.validate(async (valid) => {
        if (valid) {
          this.loading = true
          let res
          let submitForm = this.$clone(this.form)
          //   submitForm.tipsUserId = this.form.personList[0].userId
          //   submitForm.tipsUserName = this.form.personList[0].name
          submitForm.baseId = this.id
          submitForm.fileInfoVO = Array.isArray(submitForm.fileInfoVO) ? submitForm.fileInfoVO?.[0] : submitForm.fileInfoVO
          if (this.form.id) {
            res = await riskListApi.editByComments(submitForm)
          } else {
            res = await riskListApi.createByComments(submitForm)
          }
          this.loading = false
          if (res.code === this.SUCCESS_CODE) {
            this.$noticeSuccess('操作成功')
            this.visible = false
            this.$refs.table.getData()
            this.form = {
              personList: [],
              suggestion: '',
              fileInfoVO: []
            }
          }
        }else {
          this.$message.warning("请填写完所有必填项信息")
        }
      })
    },
    handleDel(id) {
      let params = [id]
      this.$delList2(
        riskListApi.deleteByComments,
        () => {
          this.$refs.table.getData()
        },
        { ids: params }
      )
    }
  }
}
</script>

<style scoped>
</style>
